<template>
    <div class="homepage">
      <div class="nav">
        <div class="nav-home">
          <img src="../../assets/01-1home.png"/>
        </div>
        <div class="nav-contain">首页</div>
      </div>
      <div class="contain">
        <div class="contain-1">
          <div class="contain-1-photo">
            <img src="../../assets/01-1picture1.png"/>
          </div>
          <div class="contain-content">
            <div class="contain-content-left">
              数据结构与算法
            </div>
            <div class="contain-content-right" @click="counter">
              <img src="../../assets/01-1copy.png">
              复制课程
            </div>
            <div class="contain-content-botton">
              基于卓越工程师培养的教学理念...
            </div>
          </div>
        </div>
        <div class="contain-2">
          <div class="contain-1-photo">
            <img src="../../assets/01-1picture1.png"/>
          </div>
          <div class="contain-content">
            <div class="contain-content-left">
              数据结构与算法
            </div>
            <div class="contain-content-botton">
              基于卓越工程师培养的教学理念...
            </div>
          </div>
        </div>
        <div class="contain-2">
          <div class="contain-1-photo">
            <img src="../../assets/01-1picture1.png"/>
          </div>
          <div class="contain-content">
            <div class="contain-content-left">
              数据结构与算法
            </div>
            <div class="contain-content-botton">
              基于卓越工程师培养的教学理念...
            </div>
          </div>
        </div>
        <div class="contain-2">
          <div class="contain-1-photo">
            <img src="../../assets/01-1picture1.png"/>
          </div>
          <div class="contain-content">
            <div class="contain-content-left">
              数据结构与算法
            </div>
            <div class="contain-content-botton">
              基于卓越工程师培养的教学理念...
            </div>
          </div>
        </div>
        <div class="contain-2">
          <div class="contain-1-photo">
            <img src="../../assets/01-1picture1.png"/>
          </div>
          <div class="contain-content">
            <div class="contain-content-left">
              数据结构与算法
            </div>
            <div class="contain-content-botton">
              基于卓越工程师培养的教学理念...
            </div>
          </div>
        </div>
        <div class="contain-3">
          <div class="contain-1-photo">
            <img src="../../assets/01-1picture1.png"/>
          </div>
          <div class="contain-content">
            <div class="contain-content-left">
              数据结构与算法
            </div>
            <div class="contain-content-botton">
              基于卓越工程师培养的教学理念...
            </div>
          </div>
        </div>
        <copy v-if="count>=1"></copy>
        <copy v-if="count>=2"></copy>
        <copy v-if="count>=3"></copy>
        <copy v-if="count>=4"></copy>
        <copy v-if="count>=5"></copy>
        <copy v-if="count>=6"></copy>
        <copy v-if="count>=7"></copy>
        <copy v-if="count>=8"></copy>
        <copy v-if="count>=9"></copy>
      </div>
      <div class="footer">
      厦门理工学院 Â© 2017
      </div>
    </div>
</template>

<script>
import Copy from './01-1Copy'
export default {
  data () {
    return {
      count: 0
    }
  },
  components: {
    Copy
  },
  methods: {
    counter: function () {
      this.count++
    }
  }
}
</script>

<style scoped>
.homepage{
  background-color: #f0f2f5;
}
.nav{
  background-color: #f0f2f5;
  height: 16px;
  width: 100%;
  padding-top: 28px;
  margin-left: 57px;
}
.nav-contain{
  margin-left: 3px;
  font-size: 14px;
  color: #c7c8cb;
  float: left;
}
.nav-home img{
  width: 14px;
  height: 14px;
  margin-top: 3px;
  float: left;
}

.contain{
  background-color: #f0f2f5;
  width: 1240px;
  height: 720px;
  margin-top: 5px;
  margin-left: 40px;
}
.contain-1{
  margin-top: 30px;
  margin-left: 15px;
  margin-right: 13px;
  width: 220px;
  height: 190px;
  float: left;
}
.contain-2{
  margin-top: 30px;
  margin-left: 15px;
  margin-right: 13px;
  width: 220px;
  height: 190px;
  float: left;
}
.contain-3{
  margin-top: 23px;
  margin-left: 15px;
  margin-right: 13px;
  width: 220px;
  height: 190px;
  float: left;
}
.contain-1-photo img{
  margin-top: 8px;
  width: 220px;
  height: 140px;
  float: left;
}
.contain-content{
  width: 220px;
  height: 50px;
}
.contain-content-left{
  width: 100px;
  height: 14px;
  margin-top: 10px;
  font-size: 14px;
  float: left;
}
.contain-content-right{
  width: 72px;
  height: 14px;
  font-size: 14px;
  margin-top: 10px;
  float: right;
  color: #58aea4;
}
.contain-content-botton{
  width: 220px;
  height: 14px;
  float: left;
  font-size: 14px;
  color: #b8b8b8;
}

.footer{
  font-size: 14px;
  color: #a0a0a0;
  width: 100%;
  height: 50px;
  text-align: center;
}
</style>
